<!--
 * @Description: 页面跳转选择组件

 * @Date: 2021-08-12 11:06:37

 * @LastEditTime: 2021-09-01 20:03:27
-->

<template>
  <div class="flex col-center h25">
    <!-- <div class="mr15">链接</div> -->
    <template>
      <div v-if="!mValue.id" class="f12 f-theme pointer" @click="open">
        选择跳转到的页面
      </div>

      <template v-else>
        <el-tag size='small'>{{pageName}}</el-tag>
        <span class="ml5 f12 f-theme pointer" @click="open">修改</span>
      </template>
    </template>

    <JumpDialog ref='jump'></JumpDialog>
  </div>
</template>

<script>

export default {
  name: "JumpSelect",
  provide() {
    return {
      value: this.value,
    };
  },
  props: {
    value: {
      default: () => ({}),
    },
  },
  data() {
    return {
      mValue: null,
      fixedPages: [
        {
          id: "/pages/index/index",
          name: "首页",
          type: "fixed",
        },
        {
          id: "/pages/index/cart",
          name: "购物车",
          type: "fixed",
        },
        {
          id: "/pages/index/user",
          name: "我的",
          type: "fixed",
        },
        {
          id: "/pages/index/category",
          name: "商品分类",
          type: "fixed",
        },
      ],
    };
  },
  computed: {
    pageName() {
      let page = {
        name: "",
      };
      switch (this.mValue.type) {
        case "fixed":
          page = this.fixedPages.find((page) => page.id == this.mValue.id);
          break;
        case "custom":
          page = { name: "" };
          break;
        case "link":
          page = { name: "" };
          break;
      }
      return page.name;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue, oldValue) {
        this.mValue = newValue;
        // console.log("mValue");
        // console.log(this.mValue);
      },
    },
    mValue: {
      immediate: true,
      handler(newValue, oldValue) {
        this.$emit("input", newValue);
      },
    },
  },
  methods: {
    open() {
      this.$refs.jump.open();
    },

    getName() {
      console.log("触发getName");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
